<template>
    <view class="page bg-fff">
        <scroll-view :scroll-x="true" class="rankingTabs bg-fff bottomShadow" v-if="navs.length > 0">
            <block v-for="(item, index) in navs" :key="index">
                <view class="tabItem" :class="index === current ? 'activeSty':''" @click="tabsChange(index)">
                    <text>{{ item.label }}</text>
                    <view class="badgeWrap">
                        <text class="badge font10 bg-error col-fff" v-if="item.desc">{{ item.desc }}</text>
                    </view>
                </view>
            </block>
        </scroll-view>

        <view class="productBox top-5" v-if="navs.length > 0 && navs[current].list.length > 0">
            <block v-for="prod in navs[current].list" :key="prod.id">
                <view class="prod">
                    <product-item :product="prod"></product-item>
                </view>
            </block>
            
            <u-loadmore status="loading" margin-top="30" v-if="navs[current].loadingType === 'loading'" />

            <view class="empty flex font13 col-grey" v-else>暂无更多</view>
        </view>

        <up-empty text="暂无数据" mode="list" marginTop="100" v-if="navs.length === 0 || navs[current]?.list.length === 0"></up-empty>
    </view>
</template>

<script>
    import { mapState, mapActions } from 'pinia';
	import { useIndexStore, useUserInfoStore } from '@/store/index';
    import { getHuanXianTabs, loadHuanXianProducts } from '@/common/api/houses';
	export default {
        data() {
            return {
                navs: [],
                current: 0,
                requestListAPI: '/product/mall/v6/query'
            }
        },
        computed:{
            ...mapState(useIndexStore, ['nowCityCode']),
			...mapState(useUserInfoStore, ['userInfo'])
        },
        onShareAppMessage(res) {
            return {
                title: `上海环线找房，点击了解详情`,
                path: `/pages/products/huan-xian/index?puid=${this.userInfo.id}`,
            	//#ifdef MP-TOUTIAO
            	templateId: '3e9tvurff9vob6ot7u',
            	//#endif
            }
        },
        //#ifdef MP-WEIXIN
        onShareTimeline() {
            return {
                title: `上海环线找房，点击了解详情`,
                query: `puid=${this.userInfo.id}`
            }
        },
        //#endif
        onLoad(options){
            const that = this;
            let { puid } = options;
            if(puid) {
                this.setPuid(puid)
            }
            uni.$check_and_login(function () {
            	that.init();
            })
        },

        onReachBottom(){
			this.loadData();
		},

        methods:{
            ...mapActions(useIndexStore, ['setPuid']),

            //初始化
            async init(){
                let { status, detail } = await getHuanXianTabs();
                if(status !== 0) {
                    uni.$u.toast(detail);
                    return
                }

                this.navs = detail.map(item => ({
                    ...item,
                    list: [],
                    next: '',
                    loadingType: 'loadmore'
                }));

			    this.loadData();
            },

            //加载列表数据
			async loadData(){
                let currTab = this.navs[this.current];

                if(currTab.loadingType === 'loading' || currTab.loadingType === 'nomore') return;

                currTab.loadingType = 'loading';

                let url = currTab.next ? currTab.next : `${this.requestListAPI}?city=${this.nowCityCode}&tag=${currTab.value}`;
                
				try{
                    let { status, detail } = await loadHuanXianProducts(url);
                    if(status !== 0) {
                        uni.stopPullDownRefresh();
                        currTab.loadingType = 'loadmore';
                        uni.$u.toast(detail);
                        return
                    }

                    currTab.list.push(...detail.results);

                    currTab.next = detail.next;
                    currTab.loadingType = currTab.next ? 'loadmore' : 'nomore';

                    uni.stopPullDownRefresh();
			}catch(err){
				uni.stopPullDownRefresh();
			}
			},

            //切换tabs
            tabsChange(index) {
                this.current = index;
                if(this.navs[index].list.length > 0) return;

                this.loadData();
            }
        }
    }
</script>

<style scoped lang="scss">
.page{
    min-height: 100vh;
    line-height: 1;
    border-top: 1px solid #ffffff;
    .rankingTabs{
        width: 100%;
        height: 86rpx;
        white-space: nowrap;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 100;
        .tabItem{
            padding: 30rpx 20rpx 20rpx 20rpx;
            display: inline-block;
            position: relative;
        }
        .activeSty{
            font-size: 30rpx;
            font-weight: bold;
            &::after{
                content: "";
                position: absolute;
                bottom: 0;
                left: 30%;
                width: 40%;
                height: 6rpx;
                border-radius: 6rpx;
                background-color: $theme-color;
            }
            &:first-child{
                margin-left: 20rpx;
            }
            &:last-child{
                margin-right: 20rpx;
            }
        }
        .badgeWrap{
            display: inline-block;
            position: relative;
            width: 2rpx;
            height: 1em;
            .badge{
                position: absolute;
                padding: 4rpx 10rpx;
                top: -20rpx;
                left: 0;
                z-index: 1;
                border-top-left-radius: 20rpx;
                border-top-right-radius: 20rpx;
                border-bottom-right-radius: 20rpx;
            }
        }
    }
    .productBox{
        padding-bottom: 30rpx;
        .prod{
            padding: 10rpx 30rpx;
            border-bottom: 1rpx solid rgba(0,0,0,.04);
        }
    }
}
</style>